<template>
	<el-card>
		<!--新增按钮  -->
		<el-button icon="el-icon-plus" type="success" v-has="'sys:picture:add'" @click="addShowClick">新增</el-button>
		<el-button  icon="el-icon-delete" @click="deleteClick()" v-has="'sys:picture:delByIds'">删除</el-button>
		<el-button icon="el-icon-arrow-left" @click="backClick()">返回</el-button>

		<!-- 用于显示图片列表 -->
		<!-- 多选框 批量删除照片-->
		<el-checkbox-group v-model="photoIdList" @change="handelCheckedPicture" class="photolist">
			<el-checkbox class="img-box" v-for="(item,index) in photoList"  :label="item.id">
				
				<el-image :src="item.pictureUrl" class="img" :preview-src-list="[item.pictureUrl]"/>
				<div class="laoshi-box">
					<div v-if="item.ifTeacher == 1" class="laoshi1">老师</div>
					<div v-if="item.ifTeacher == 0" class="laoshi2">&nbsp;</div>
				</div>
			</el-checkbox>
			
		</el-checkbox-group>
		
		
		<!-- 添加图片的表单 -->
		<YwDialog @confirm="confirmClick" width="500px"  ref="ywDialogRef" title="信息">
			
			<el-upload
				class="upload-demo"
				drag
				action="/server/api/app/file/up"
				multiple
				:on-success="handleSuccess"	
				:headers="headers"	
				>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			</el-upload>
		</YwDialog>


	</el-card>
</template>

<script>
	export default {

		data() {
			return {

				//添加照片
				curData:{
					studentId:null,
					
					pictureUrlList:[]
				},
				//获取用户id列表
				userIdList:[],
				//学生对应的照片列表
				photoList:[],
				//删除图片
				photoIdList:[],
				headers:{}
			};
		},
		mounted() {
			this.headers = this.$http.uploadHeaders();
			console.log(this.headers)
			this.$nextTick(() => {
				this.getPhotoList();
			});
		},
		onload(){
			
		},
		methods: {
			//返回上一页
			backClick(){
				this.$router.back()
			},
			
			//获取选中的图片
			handelCheckedPicture(value){
				console.log(value)
			},
			//图片上传成功, 获取图片路径列表
			handleSuccess(res,file,fileList){
				this.curData.pictureUrlList.push(res.result.url)
			},
			//新增按钮
			addShowClick() {
				this.$refs.ywDialogRef.open()
			},

			//表单的确认按钮
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))							
						//新增操作
						this.$api.sysPictureAdd(data);
						this.$refs.ywDialogRef.close();
						location.reload();					
			},

			//根据学生id获取图片列表
			getPhotoList() {
                let studentId = this.$route.query.studentId
				this.curData.studentId = studentId
				this.$api.sysPictureFindByStudentId(studentId).then(data => {
					this.photoList = data;
				}); 
			},
			//获取用户id列表
			getUserIdList(){
				this.$api.sysUserFindAllByList().then(data => {
					this.userIdList = data;
				}); 
			},
			

			//批量删除照片
			deleteClick(){
				this.$api.sysPictureDelByIds(this.photoIdList);
				//刷新
				location.reload();	
			}
		},
	};
</script>

<style lang="scss" scoped>
.upload-demo{
	width: 300px;
	position: relative;
	left: 45px;
}
.photolist{
	margin-top: 20px;
}
.img-box{
	width: 11%;
	margin-bottom: 10px;
}
.img{
	width: 165px;
	height: 110px;
	position: relative;
	left: -30px;
	top: 28px;

}

.laoshi-box{
	width: 25%;
	height: 20%;
	position: relative;
	top: -80px;
	left: 86px;
}
.laoshi1{
	width: 100%;
	height: 100%;
	background-color: #409EFF;
	color: white;
	text-align: center;
	border-radius: 12px;
}
.laoshi2{
	width: 100%;
	height: 100%;
	color: white;
	text-align: center;
	border-radius: 12px;
}
</style>
